/* 一次封装 : 封装 基地址 + 拦截器 */

/* 基地址 */
// 导入axios
import axios from 'axios'
// 导入store
import store from '@/store/index.js'
// 导入element-ui的Message提示
import { Message } from 'element-ui'
// 导入路由对象（ this.$router只能在 .vue文件使用，在js中需要使用导入一下即可）
import router from '@/router/index.js'

/*
(1)request 相当于 Axios 的实例对象
(2)为什么要有request,而不是直接用axios
  * 项目开发中，有可能会有两个基地址
  * 不同的接口配置不同（有的要token,有的不要token）
*/
// 创建新的axios实例
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net/',
  timeout: 5000
})

/* 拦截器 */
/* 基础拦截器
// 1.请求拦截器
// request.interceptors.request.use(config => {}, error => {})
// 2.响应拦截器
// request.interceptors.response.use(response => {}, error => {}) */

// 1.请求拦截器
request.interceptors.request.use(config => {
  // 在请求之前做些什么

  // 💎如果有token就在请求头中token
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }

  return config
}, error => {
  // 请求错误
  return Promise.reject(error)
})
// 2.响应拦截器
request.interceptors.response.use(response => {
  // 在响应之前做些什么
  // return response

  // 💎结构 在layout/index.vue需要修改{data}  store/user.js需要修改{data}
  return response.data
}, error => {
  // 响应错误

  // 💎有错误响应, 提示错误提示
  Message.warning(error.response.data.message)
  // 如果是401说明token没有或过期或错误，跳转登录页
  if (error.response.status === 401) {
    // 跳转登录页
    router.push('/login')
  }

  return Promise.reject(error)
})

// 导出模块
export default request
/*
axios拦截器 和 路由导航守卫区别（他们只是在处理token的时候有一点交叉，但是两者的作用是有着本质的区别）

1.路由导航守卫作用：页面跳转的权限管理
重点强调的是`页面跳转权限`，不一定非要是登录。 例如常见的权限有
登录权限： 某些页面需要登录才能跳转。导航守卫会检查你有没有token,有token就有权限，没有token就没权限。 不关心你的token是否过期。
会员权限：某些页面需要开会员才能跳转。用户已经登录了，导航守卫会检查用户等级，不是会员就跳转开通会员页面，是会员就进入会员页面

2.axios拦截器作用： 拦截ajax请求，统一处理请求报文和响应报文
重点强调的`拦截ajax请求`。不一定非要是token. 例如常见的有
请求拦截器：  统一在请求头中添加token、 统一给请求添加loading动画等~
响应拦截器：拦截401错误，跳转登录页。 拦截其他错误，弹出一个提示框等~
*/
